﻿
@{
    Layout = null;
}


<!DOCTYPE html>


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>LayUI后台系统登录</title>
    <link href="~/css/login.css" rel="stylesheet" />

    <link href="~/layui-v2.6.8/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui-v2.6.8/layui-v2.6.8/layui/layui.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>

    <style>

        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input, .layui-select, .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
    </style>
    <link id="layuicss-layer" rel="stylesheet" href="/layui\css\modules\layer\default" media="all">
</head>
<body>
    <!-- Head -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm12 layui-col-md12 zyl_mar_01">
                <blockquote class="layui-elem-quote">电商后台管理系统</blockquote>
            </div>
        </div>
    </div>
    <!-- Head End -->
    <!-- Carousel -->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12">
            <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin" lay-anim="fade" lay-indicator="none" lay-arrow="hover" style="height: 555.385px !important; width: 100%;">
                <div carousel-item="">
                    <div class="">
                        <div class="zyl_login_cont">
                            <canvas width="1536" height="555" style="display: block; background: rgba(0, 0, 0, 0);"></canvas>
                        </div>
                    </div>
                    <div class="layui-this">
                        <img src="/images/01.jpg">
                    </div>
                    <div class="">
                        <div class="background">
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                    <div class="">
                        <img src="/images/03.jpg">
                    </div>
                </div>
                <div class="layui-carousel-ind">
                    <ul>
                        <li class=""></li>
                        <li class="layui-this"></li>
                        <li class=""></li>
                        <li class=""></li>
                    </ul>
                </div>
                <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
                <button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
            </div>
        </div>
    </div>
    <!-- Carousel End -->
    <!-- Footer -->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
            © 2019 - xx系统后台登录 || XX公司版权所有
        </div>
    </div>
    <!-- Footer End -->
    <!-- LoginForm -->
    <div class="zyl_lofo_main">
        <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
            <legend>欢迎登录电商后台管理平台</legend>
        </fieldset>
        <div class="layui-row layui-col-space15">
            <form class="layui-form zyl_pad_01" action="#">
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="text" name="loginName" lay-verify="required|userName" autocomplete="off" placeholder="账号" class="layui-input">
                        <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="password" name="pwd" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
                        <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-row">
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="layui-form-item">
                                <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                                <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()">Y5Zn</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">立即登录</button>
                </div>
            </form>
        </div>
    </div>
    <!-- Jqarticle Js -->
    <script type="text/javascript" src="/js/jparticle.min.js"></script>
    <!-- ZylVerificationCode Js-->
    <script type="text/javascript" src="/js/zylVerificationCode.js"></script>
    <script>

        //（4） 前端：浏览器请求服务器的时候，要带上JWT
        $.ajaxSetup({
            beforeSend: function (xhr) {
                if (localStorage.getItem("token") !== null) {
                    //（4） 前端：浏览器请求服务器的时候，要带上JWT
                    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem("token"));
                }
            }
        });

        layui.use(['form', 'layedit', 'laydate'], function () {

            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            //监听提交
            form.on('submit(demo1)', function (data) {
                $.ajax({
                    url: 'https://localhost:44398/api/UsersAPI/Login',
                    type: 'post',
                    data: data.field,
                    success: function (d) {
                        if (d > 0) {
                            layer.msg("登录成功", function () {
                                parent.location.href = "/MenusWeb/Index";
                            })
                        } else {
                            layer.msg("登录失败");
                            return;
                        }
                    }
                })
                return false;
            });

            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function () {
                var data = form.val('example');
                alert(JSON.stringify(data));
            });


            //设置轮播主体高度
            var zyl_login_height = $(window).height() / 1.3;
            var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


            //Login轮播主体
            carousel.render({
                elem: '#zyllogin'//指向容器选择器
                , width: '100%' //设置容器宽度
                , height: 'zyl_car_height'
                , arrow: 'always' //始终显示箭头
                , anim: 'fade' //切换动画方式
                , autoplay: true //是否自动切换false true
                , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
                , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
                , interval: '5000' //自动切换时间:单位：ms（毫秒）
            });

            //监听轮播--案例暂未使用
            carousel.on('change(zyllogin)', function (obj) {
                var loginCarousel = obj.index;
            });

            ////粒子线条
            $(".zyl_login_cont").jParticle({
                background: "rgba(0,0,0,0)",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber: 100,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 30,//粒子的动画速度
                }
            });

        });
    </script>

</body>
</html>
